<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <div th:insert="commen/head :: header">
    </div>
<!--    <link rel="stylesheet" th:href="@{/css/reset.css}">-->
    <style>
        .one {
            width: 980px;
            height: 60px;
            color: #000000;
        }
    </style>
</head>
<body style="background-color: rgb(242,244,247)">
<div th:insert="commen/navigationBar :: topNavBar"></div>
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-2" >
                <div style="text-align: center" th:insert="commen/navigationBar :: leafTeaNavBar"></div>
            </div>
            <div class="col-md-10" style="background-color: #ffffff; margin-top: 5px; padding-bottom: 20px;">
                <div style="margin-top: 10px; border-bottom: 1px solid #e0e0e0;">
                    <span style="font-size: 18px; font-weight: bold;">新建签到:  </span>
                    <button style="font-size: 18px" class="btn btn-primary" data-toggle="modal" data-target="#commonSingIn" role="button">普通签到</button>
                    <button style="font-size: 18px" class="btn btn-primary" data-toggle="modal" data-target="#codeSingIn" role="button">签到码签到</button>
                </div>
                <div th:each="singIn : ${singIns}"  style="margin-top: 10px; padding-top: 5px; padding-bottom: 5px;">
                    <div class="one">
                        <a th:href="@{'/teaSingInInfo/' + ${singIn.getSId()}}" style="text-decoration: none; color:#000;">
                            <section style="border-bottom: 1px solid #e0e0e0; padding-left: 10px; padding-right: 10px;width: 1200px;">
                                <img th:if="${singIn.getSingInStatus() == 2}" th:src="@{../img/cantSingIn.jpg}" style="vertical-align: middle; height: 50px; width: 50px; margin: 20px 0;">
                                <img th:if="${singIn.getSingInStatus() == 1}" th:src="@{../img/singedIn.jpg}" style="vertical-align: middle; height: 50px; width: 50px; margin: 20px 0;">
                                <img th:if="${singIn.getSingInStatus() == 0}" th:src="@{../img/singedIn.jpg}" style="vertical-align: middle; opacity:0.5; height: 50px; width: 50px; margin: 20px 0;">
                                <span style="font-size: 18px; font-weight: bold;" th:text="${singIn.getSName()}"></span>
                                <div style="float:right;padding-top: 35px;">
                                    时长:<span th:text="${singIn.getSTime()}"></span>分钟
                                    <span th:if="${singIn.getSingInStatus() == 0}">未开始</span>
                                    <span th:if="${singIn.getSingInStatus() == 1}">已开始</span>
                                    <span th:if="${singIn.getSingInStatus() == 2}">已结束</span>
                                    <a class="btn btn-success" th:if="${singIn.getSingInStatus() == 0}" th:href="@{'/startSingIn/' + ${singIn.getSId()}}">开始</a>
                                    <a class="btn btn-danger" th:if="${singIn.getSingInStatus() == 1}" th:href="@{'/endSingIn/' + ${singIn.getSId()}}">结束</a>
                                    <a id="delSingIn" class="btn btn-danger" th:href="@{'/deleteSingIn/' + ${singIn.getSId()}}" style="margin-left: 20px;">删除</a>
                                </div>
                            </section>
                        </a>
                    </div>
                </div>
            </div>

        </div>
    </div>
    <script>
        let delSingIn = document.getElementById("delSingIn");
        delSingIn.onclick = function () {
            if (window.confirm("您确定要删除该签到信息吗？")) {
                return true;
            } else {
                return false;
            }
        }
    </script>
    <!--普通签到模态框-->
    <div class="modal fade" id="commonSingIn">
        <div class="modal-dialog">
            <div class="modal-content">
                <!-- 模态框头部 -->
                <div class="modal-header">
                    <h4 class="modal-title">新建签到</h4>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
                <!-- 模态框主体 -->
                <div class="modal-body">
                    <form action="#" data-th-action="@{/addSingIn}" method="post" data-th-object="${model}">
                        <input type="hidden" name="userId" th:value="${session.user.getUserId()}">
                        <input type="hidden" name="courseId" th:value="${session.course.getCourseId()}">
                        <input class="form-control" type="text" name="sName" placeholder="请输入标题"><br>
                        <select class="form-control" name="sTime">
                            <option value="0">0</option>
                            <option value="1">1</option>
                            <option value="2">2</option>
                            <option value="3">3</option>
                            <option value="4">4</option>
                            <option value="5">5</option>
                            <option value="6">6</option>
                            <option value="7">7</option>
                            <option value="8">8</option>
                            <option value="9">9</option>
                            <option value="10">10</option>
                            <option value="11">11</option>
                            <option value="12">12</option>
                            <option value="13">13</option>
                            <option value="14">14</option>
                            <option value="15">15</option>
                            <option value="16">16</option>
                            <option value="17">17</option>
                            <option value="18">18</option>
                            <option value="19">19</option>
                            <option value="20">20</option>
                            <option value="21">21</option>
                            <option value="22">22</option>
                            <option value="23">23</option>
                            <option value="24">24</option>
                            <option value="25">25</option>
                            <option value="26">26</option>
                            <option value="27">27</option>
                            <option value="28">28</option>
                            <option value="29">29</option>
                            <option value="30">30</option>
                            <option value="31">31</option>
                            <option value="32">32</option>
                            <option value="33">33</option>
                            <option value="34">34</option>
                            <option value="35">35</option>
                            <option value="36">36</option>
                            <option value="37">37</option>
                            <option value="38">38</option>
                            <option value="39">39</option>
                            <option value="40">40</option>
                            <option value="41">41</option>
                            <option value="42">42</option>
                            <option value="43">43</option>
                            <option value="44">44</option>
                            <option value="45">45</option>
                            <option value="46">46</option>
                            <option value="47">47</option>
                            <option value="48">48</option>
                            <option value="49">49</option>
                            <option value="50">50</option>
                            <option value="51">51</option>
                            <option value="52">52</option>
                            <option value="53">53</option>
                            <option value="54">54</option>
                            <option value="55">55</option>
                            <option value="56">56</option>
                            <option value="57">57</option>
                            <option value="58">58</option>
                            <option value="59">59</option>
                            <option value="60">60</option>
                        </select><br>
                        <button class="btn btn-primary" name="action" type="submit" value="save">保存</button>
                        <button class="btn btn-primary" name="action" type="submit" value="start">立刻开始</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <!--签到码模态框-->
    <div class="modal fade" tabindex="-1" id="codeSingIn" >
        <div class="modal-dialog">
            <div class="modal-content">
                <!-- 模态框头部 -->
                <div class="modal-header">
                    <h4 class="modal-title">新建签到</h4>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
                <!-- 模态框主体 -->
                <div class="modal-body">
                    <form action="#" data-th-action="@{/addSingIn}" method="post" data-th-object="${model}">
                        <input type="hidden" name="userId" th:value="${session.user.getUserId()}">
                        <input type="hidden" name="courseId" th:value="${session.course.getCourseId()}">
                        <input class="form-control" type="text" name="sName" placeholder="请输入标题"><br>
                        <input class="form-control" type="text" name="singInCode" placeholder="请输入签到码"><br>
                        <select class="form-control" name="sTime">
                            <option value="0">0</option>
                            <option value="1">1</option>
                            <option value="2">2</option>
                            <option value="3">3</option>
                            <option value="4">4</option>
                            <option value="5">5</option>
                            <option value="6">6</option>
                            <option value="7">7</option>
                            <option value="8">8</option>
                            <option value="9">9</option>
                            <option value="10">10</option>
                            <option value="11">11</option>
                            <option value="12">12</option>
                            <option value="13">13</option>
                            <option value="14">14</option>
                            <option value="15">15</option>
                            <option value="16">16</option>
                            <option value="17">17</option>
                            <option value="18">18</option>
                            <option value="19">19</option>
                            <option value="20">20</option>
                            <option value="21">21</option>
                            <option value="22">22</option>
                            <option value="23">23</option>
                            <option value="24">24</option>
                            <option value="25">25</option>
                            <option value="26">26</option>
                            <option value="27">27</option>
                            <option value="28">28</option>
                            <option value="29">29</option>
                            <option value="30">30</option>
                            <option value="31">31</option>
                            <option value="32">32</option>
                            <option value="33">33</option>
                            <option value="34">34</option>
                            <option value="35">35</option>
                            <option value="36">36</option>
                            <option value="37">37</option>
                            <option value="38">38</option>
                            <option value="39">39</option>
                            <option value="40">40</option>
                            <option value="41">41</option>
                            <option value="42">42</option>
                            <option value="43">43</option>
                            <option value="44">44</option>
                            <option value="45">45</option>
                            <option value="46">46</option>
                            <option value="47">47</option>
                            <option value="48">48</option>
                            <option value="49">49</option>
                            <option value="50">50</option>
                            <option value="51">51</option>
                            <option value="52">52</option>
                            <option value="53">53</option>
                            <option value="54">54</option>
                            <option value="55">55</option>
                            <option value="56">56</option>
                            <option value="57">57</option>
                            <option value="58">58</option>
                            <option value="59">59</option>
                            <option value="60">60</option>
                        </select><br>
                        <button class="btn btn-primary" name="action" type="submit" value="save">保存</button>
                        <button class="btn btn-primary" name="action" type="submit" value="start">立刻开始</button>
                    </form>
                </div>
            </div>
        </div>
    </div>

</body>
</html>